<template>
  <LayoutHeader title="账号管理" />
  <div>
    <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    <van-field
      v-model="sign"
      label="个性签名"
      placeholder="个性签名"
      disabled
    />
    <van-field v-model="password" label="密码" placeholder="请输入密码" />
  </div>

  <van-button
    type="primary"
    color="#ffc400"
    round
    block
    class="save-btn"
    @click="onSave"
    >保存</van-button
  >
  <van-button
    type="primary"
    color="#ffc400"
    round
    block
    class="save-btn"
    @click="onLogoout"
    >退出登录</van-button
  >
</template>

<script>
import LayoutHeader from "../../components/LayoutHeader.vue";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";

export default {
  components: {
    LayoutHeader,
  },
  setup() {
    const router = useRouter();

    const data = reactive({
      name: "",
      sign: "战胜自己是命运的强者",
      password: "",
    });

    const onSave = () => {
      if (data.name && data.password) {
        let userInfo = JSON.parse(localStorage.userInfo);
        let newUserInfo = {
          username: data.name || userInfo.username,
          password: data.password || userInfo.password,
        };
        localStorage.setItem("userInfo", JSON.stringify(newUserInfo));

        Toast("修改成功");
        router.push("/mine");
      } else {
        Toast("请输入内容");
      }
    };

    const onLogoout = () => {
      localStorage.removeItem("isLogin");
      router.push("/login");

      Toast("退出成功");
    };

    return {
      ...toRefs(data),
      onSave,
      onLogoout,
    };
  },
};
</script>

<style lang="less" scoped>
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>
